<template>
    <el-descriptions :column="column" :colon="colon" :labelStyle="labelStyle" :contentStyle="contentStyle">
        <el-descriptions-item :label="item.label" v-for="(item, index) in objectOfValue" :key="index">
            <span v-if="item.formater">{{ item.formater(dataInfo[item.value]) }}</span>
            <span v-else>{{ dataInfo[item.value] }}</span>
        </el-descriptions-item>
    </el-descriptions>
</template>

<script>
export default {
    name: 'descriptions-view',
    props: {
        column: {
            type: Number,
            default: 2
        },
        colon: {
            type: Boolean,
            default: false
        },
        objectOfValue: {
            type: Array,
            default: () => []
        },
        dataInfo: {
            type: Object,
            default: () => { }
        },
        // 只有right和left两个值
        labelObj: {
            type: Object,
            default: () => { }
        },
        contentObj: {
            type: Object,
            default: () => { }
        }
    },
    computed: {
        labelStyle() {
            let baseStyle = {}
            if (this.labelObj && this.labelObj.labelAlign == 'right') {
                baseStyle = {
                    display: 'block',
                    textAlign: 'right',
                    // 解决不对齐的问题
                    width: this.labelObj.width || 'auto',
                }
            }
            return baseStyle
        },
        contentStyle() {
            let baseStyle = {}
            if (this.contentObj && this.contentObj.contentAlign != 'left') {
                baseStyle = {
                    display: 'block',
                }
                if (this.contentObj.contentAlign) baseStyle.textAlign = this.contentObj.contentAlign
                // 设置长度
                if (this.contentObj.width) baseStyle.width = this.contentObj.width
            }
            return baseStyle
        },
    },
}
</script>

<style scoped lang="scss"></style>